<template>
  <el-switch 
    v-model="theme"
    v-bind="$attrs"
    :active-value="on"
    :inactive-value="off"
    @change="changeThemeType"
  >
  </el-switch>
</template>

<script setup lang="ts" name="ThemeSwitch">
import { ref, onMounted } from 'vue'

const theme = ref('light')
const changeThemeType = (type:string) => {
    if (theme.value !== type) {
        theme.value = type
    }
    localStorage.setItem('easy-viaualize-theme', type)
    document.documentElement.className = theme.value
}
defineProps({
    // 传入switch的true状态
    on: {
        type: String,
        default: 'light',
    },
    // 传入switch的false状态
    off: {
        type: String,
        default: 'dark',
    },
})
onMounted(() => {
    changeThemeType(localStorage.getItem('easy-viaualize-theme') || theme.value)
})
</script>

<style scoped lang='scss'>

</style>